<template>
  <view class="todo-item">
    <view class="header">
      <text>{{ title }}</text>
    </view>
    <view class="content">
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
import { ref,defineProps } from 'vue';

defineProps({
	title:{
		type:String,
		default(){
			return "title";
		}
	}
});

</script>

<style scoped>
.todo-item {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
}

.header {
  font-weight: bold;
  margin-bottom: 10px;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>